<!DOCTYPE html>
<html>
<head>
    <title>文章库列表</title>
    <#include "/header.html">
</head>
<body>
<style>
    th {
        text-align: center;
    }

    .my-select {
        display: block;
        margin-right: 10px;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 34px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .my-select:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }

    .creatHead {
        display: flex;
    }

    .creatTemp {
        display: flex;
    }

    .creatTemp .creatTable {
        position: relative;
        flex: 1;
        width: calc(100% - 15px);
        margin-right: 30px;
    }

    .creatTemp .creatTable:last-child {
        margin-right: 0;
    }

    .creatTemp .creatTitle {
        color: #ffffff;
        background: #539FF2;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .creatTemp .creatData table {
        width: 100%;
        border-color: #E7E7E7;
    }

    .creatTemp .creatData tr {
        display: flex;
        height: 50px;
        line-height: 50px;
    }

    .creatTemp .creatData tr > th,
    .creatTemp .creatData tr > td {
        flex: 1;
        text-align: center;
    }

    .creatTemp .creatData tr > th:nth-child(2),
    .creatTemp .creatData tr > td:nth-child(2) {
        flex: 2;
    }

    .creatTemp .creatData tr > th {
        font-weight: 700;
        color: #ffffff;
        background: #539FF2;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }

    .creatTemp .creatData tr > th:last-child {
        border-right: none;
    }

    .creatTemp .creatData tr > td {
        border-bottom: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .creatTemp .creatData tr > td:first-child {
        border-left: 1px solid #e7e7e7;
    }

    .t-model {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .t-model .t-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background: #000000;
        opacity: 0.2;
    }

    .t-model .t-article {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20vw;
        width: 60vw;
        height: inherit;
        z-index: 2;
        background: #ffffff;
        overflow: scroll;
    }

    .innerbox {
        width: 100%;
        max-height: 500px;
        overflow: hidden;
        overflow-y: auto
    }

    .innerbox::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
        scrollbar-arrow-color: red;

    }

    .innerbox::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 1px;
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
        scrollbar-arrow-color: red;
    }

    .innerbox::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }
</style>
<div id="rrapp" v-cloak>
    <div>
        <div v-show="showList == 1" class="grid-btn creatHead">
            <select name="" v-model="isA" class="my-select">
                <option value="-1" selected>全部模板分类</option>
                <option v-for="(item,index) in bArticleTempTypeLists" :key="index" :value="item.id">
                    {{item.typeName}}
                </option>
            </select>
            <input maxlength="50" style="width: 300px;margin-right:10px " class="form-control"
                   placeholder="可输入模板文章标题进行查询"
                   v-model="isT"/>
            <input style="color:#66afe9;;border-color: #66afe9;" type="button" class="btn btn-default"
                   style="float: left" @click="reloadCreat" value="查询"/>
        </div>

        <div class="creatTemp">
            <div v-show="showList == 1" class="creatTable">
                <div class="creatTitle">待选文章</div>
                <div class="creatData">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>id</th>
                            <th>标题</th>
                            <th>所属分类</th>
                            <th>操作</th>
                        </tr>
                    </table>
                    <div class="innerbox">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr v-for="(v,i) in arrayOld">
                                <td>{{v.id}}</td>
                                <td style="text-decoration: underline; cursor: pointer;" @click="openModel(v.id)">{{v.articleTitle}}</td>
                                <td>{{v.articleTypeName}}</td>
                                <td>
                                    <input @click="delOld(i)" type="button" class="btn btn-primary" value="选择>"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div v-show="arrayOld.length === 0"
                         style="text-align: center; line-height: 50px; background: #ECF0F5;">当前查询结果为空
                    </div>
                </div>
            </div>
            <div v-show="!resultShow" class="creatTable">
                <div class="creatTitle">已选文章</div>
                <div class="creatData">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>id</th>
                            <th>标题</th>
                            <th>所属分类</th>
                            <th>操作</th>
                        </tr>
                    </table>
                    <div class="innerbox">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr v-for="(v,i) in arrayNew">
                                <td>{{v.id}}</td>
                                <td>{{v.articleTitle}}</td>
                                <td>{{v.articleTypeName}}</td>
                                <td>
                                    <input @click="delNew(i)" type="button" class="btn btn-warning" value="移除"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div v-show="arrayNew.length === 0"
                         style="text-align: center; line-height: 50px; background: #ECF0F5;">当前选中结果为空
                    </div>
                </div>
            </div>
            <div v-show="resultShow" class="creatTable">
                <div class="creatTitle">生成的文章</div>
                <div class="creatData">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>id</th>
                            <th>标题</th>
                            <th>所属品牌</th>
                            <th>操作</th>
                        </tr>
                    </table>
                    <div class="innerbox">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr v-for="(v,i) in arrayCreat">
                                <td>{{v.id}}</td>
                                <td>{{v.articleTitle}}</td>
                                <td>{{v.articleTypeName}}</td>
                                <td>
                                    <span style="color: green">已入库</span>
                                    <!--                                <span style="color: red">未入库</span>-->
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div v-show="arrayCreat.length === 0"
                         style="text-align: center; line-height: 50px; background: #ECF0F5;">当前生成结果为空
                    </div>
                </div>
            </div>
        </div>

        <div v-show="!resultShow" style="text-align: center; margin-top: 20px">
            <div v-show="showList == 2" style="text-align: left">
                <input maxlength="50" style="width: 300px" class="form-control" list="brandNameList" placeholder="目标品牌"
                       id="brandNames">
                <datalist id="brandNameList" style="line-height: 10px">

                </datalist>

                <input type="button" class="btn btn-primary" @click="creatArticle" style="width: 200px;margin-top: 20px"
                       value="生成>"/>
                <input type="button" class="btn btn-warning" @click="setShowList(1)"
                       style="width: 95px;margin-top: 20px" value="返回"/>
            </div>
            <input v-show="showList == 1" @click="setShowList(2)" style="width: 150px;" type="button"
                   class="btn btn-primary" value="下一步"/>
        </div>

        <div v-show="resultShow" style="margin-top: 20px">
            <div style="color: #539FF2">目标品牌：{{resultBrandName}}，生成入库&nbsp;&nbsp;{{arrayCreat.length}}&nbsp;&nbsp;篇文章
            </div>
            <input type="button" class="btn btn-warning" @click="gotoArticleInfo" style="width: 200px;margin-top: 20px"
                   value="返回文章库"/>
        </div>
    </div>

    <div class="t-model" v-show="modelShow">
        <div class="t-bg" @click="closeModel"></div>

        <iframe class="t-article" :srcdoc="modelMsg" src="">
            <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/barticletemp.js?_${.now?long}"></script>
<script>
    vm.reloadCreat();

    setTimeout(function () {
        $.ajax({
            type: "POST",
            async: false,
            url: baseURL + 'sys/bbrandinfo/queryAll',
            contentType: "application/json",
            success: function (r) {
                // console.log(r);
                if (r.code == 0) {
                    for (var i = 0; i < r.brandInfo.length; i++) {
                        $("#brandNameList").append(
                            "<option value=" + r.brandInfo[i].brandName + ">" + "</option>");
                    }
                }
            }
        });
    }, 2000);
</script>
</body>
</html>
